@import "../../Master/index";

.BookShelf {
  .Masterfun();
  .bookhead{
    position: relative;
    .imgs {
      width: 100%;
      top: 0;
      left: 0;
      z-index: 3;
      img {
        width: 100%;
        margin: auto;
      }
    }
    .tests {
      position: absolute;
      box-sizing: border-box;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 99;
      padding: 2.5rem 0;
      color: #fff;
      .nickname{
        width: 5.6rem!important;
        height: 5.6rem;
        margin: 0 auto;
        img{
          width: 100%;
          border-radius: 50%;
        }
      }
      .username{
        font-size: 1.8rem;
        line-height: 0.83;
        font-weight: 600;
        margin-top: 1.4rem;
      }
      .readday{
        font-size: 1.5rem;
        line-height: 1;
        margin-top: 1.1rem;
      }
    }
    .bookboard{
      position: absolute;
      bottom: 0;
      left: 5%;
      width: 90%;
      border-radius: 5px;
      box-shadow: 0 12px 48px 0 rgba(0, 0, 0, 0.1);
      background-color: #ffffff;
      transform: translate(0px,48%);
      -ms-transform: translate(0px,48%);
      -webkit-transform: translate(0px,48%);
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding: 1.7rem;
      box-sizing: border-box;
      z-index: 999;
      .textleft{
        font-size: 1.5rem;
        line-height: 1.7;
        .btnGo{
          margin-top: .5rem;
          font-size: 1.3rem;
          color: #66440a;
          position: relative;
          padding-bottom: .7rem;
          margin-left: -.2rem;
          .bgyello{
            width: 18rem;
            height: 2.4rem;
            background-color: #ffd000;
            opacity: .3;
          }
          .yellotext{
            width: 18rem;
            height: 2.4rem;
            line-height: 2.5rem;
            background-color: #ffd000;
            position: absolute;
            top: .44rem;
            left: .4rem;
            letter-spacing: .15rem;
          }
        }
      }
      .qrcode{
        width: 8rem;
        height: 8rem;
        img{
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .bookcontent{
    margin: 2.5rem;
    margin-top: 11rem;
  }
}
